<template>
  <div>
    <base-modal
      :title="$t('common.base.toast')"
      :show.sync="visible"
      width="524px"
      :close-on-click-modal="false"
    >
      <div class="goods-added-dialog">
        <div v-if="errorList.length" class="dialog-title">
          {{$t('goods.tips.priceTip', {data1: errorList.length})}}
        </div>
        <div v-for="item in errorList" :key="item" class="dialog-tip">
          {{ item }}
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
        <el-button
          v-if="ids.length > 1"
          type="primary"
          @click="handleAdded"
          :loading="loading"
          >{{$t('goods.component.continueLaunch')}}</el-button
        >
      </div>
    </base-modal>
  </div>
</template>

<script>
import { updatePutawayStatus } from '@src/api/PortalApi.ts';

export default {
  emits: ['reloadPage'],
  data() {
    return {
      visible: false,
      loading: false,
      errorList: [],
      ids: [],
    };
  },
  methods: {
    open(data, ids) {
      this.ids = ids;
      if (Array.isArray(ids) && !this.ids.length) {
        return this.$platform.alert(this.$t('goods.limit.selectGoods'));
      }

      this.visible = true;
      this.errorList = data;
    },
    async handleAdded() {
      try {
        const { code } = await updatePutawayStatus({
          ids: this.ids,
          putawayStatus: 1,
        });

        if (code !== '200') {
          return this.$message.error(this.$t('goods.tips.launchFailed'));
        }

        this.visible = false;
        this.$message.success(this.$t('goods.tips.launchSuccess'));
        setTimeout(() => {
          this.$emit('reloadPage');
        }, 1000);
      } catch (error) {
        this.loading = false;
        console.error('error', error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}
.dialog-tip {
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  margin-top: 14px;
  @include text-ellipsis();
}

.goods-added-dialog {
  padding: 20px;
}
</style>
